<template>
  <div class="user_playlist" @click.self="clickColse()" @touchmove.self.prevent>
    <div class="main">
      <div class="top">
        <div class="left">收藏到歌单</div>
        <div class="right" v-show="isSelect" @click.stop="clickSelect()">
          <i></i>
          <span>多选</span>
        </div>
        <div class="right" v-show="!isSelect" @click.stop="clickSelect()">
          <span :class="optionTrueNum?'red':''">
            完成
            <b v-show="optionTrueNum">({{optionTrueNum}})</b>
          </span>
        </div>
      </div>
      <div class="content">
        <ul @touchmove.self>
          <li class="new" @click.stop="showNewPlaylist()">
            <div class="img">
              <img src="../images/ars.png" alt />
            </div>
            <div class="info">
              <p>新建歌单</p>
            </div>
          </li>
          <li
            class="exist"
            v-for="(item,index) in user_playlist_data.playlist"
            :key="index"
            @click.stop="tracks(item.id)"
          >
            <div class="img">
              <img v-lazy="item.coverImgUrl" alt />
              <div class="privacy" v-show="item.privacy">
                <i></i>
              </div>
            </div>
            <div class="info">
              <p class="name">{{item.name}}</p>
              <span>{{item.trackCount}}首</span>
            </div>
            <i
              v-show="!isSelect"
              :class="isOption[index]?'optionTrue':'option'"
              @click.self.stop="clickOption(index,item.id)"
            ></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: ["songId"],
  data() {
    return {
      isSelect: true, // 是否多选
      isOption: [], // 是否选中
      optionIdList: [],
      optionTrueNum: 0 // 选中数量
    };
  },
  computed: {
    ...mapState("user_playlist", ["user_playlist_data"]),
    ...mapState("login_status", ["login_status_data"])
  },
  created() {
    this.getUserPlaylist();
  },
  methods: {
    // 点击收藏到当前歌单
    tracks(pid) {
      this.$store
        .dispatch("playlist_tracks/getPlaylistTracksData", {
          op: "add",
          pid: pid,
          tracks: this.songId
        })
        .then(
          res => {
            this.$emit("colseUserPlaylist");
            this.$emit("userTracksSuccess");
          },
          err => {
            this.$emit("colseUserPlaylist");
            this.$emit("userTracksFail");
          }
        );
    },
    // 显示新建歌单
    showNewPlaylist() {
      this.$emit("showNewPlaylist");
    },
    // 多选歌单事件
    clickOption(index, id) {
      if (this.isOption[index]) {
        this.isOption[index] = false;
        this.optionTrueNum--;
        this.optionIdList.splice(
          this.optionIdList.findIndex(item => item === id),
          1
        );
      } else {
        this.isOption[index] = true;
        this.optionTrueNum++;
        this.optionIdList.push(id);
      }
    },
    // 是否多选
    clickSelect() {
      if (this.isSelect) {
        this.isSelect = false;
      } else {
        if (this.optionTrueNum) {
          let promiseArr = [];
          for (let i = 0; i < this.optionIdList.length; i++) {
            let element = this.optionIdList[i];
            promiseArr.push(
              new Promise((resolve, reject) => {
                this.$store
                  .dispatch("playlist_tracks/getPlaylistTracksData", {
                    op: "add",
                    pid: element,
                    tracks: this.songId
                  })
                  .then(
                    data => {
                      resolve(true);
                    },
                    data => {
                      reject(false);
                    }
                  );
              })
            );
          }
          Promise.all(promiseArr).then(
            data => {
              this.isSelect = true;
              this.isOption = [];
              this.optionIdList = [];
              this.optionTrueNum = 0;
              this.$emit("colseUserPlaylist");
              this.$emit("userTracksSuccess");
            },
            err => {
              this.isSelect = true;
              this.isOption = [];
              this.optionIdList = [];
              this.optionTrueNum = 0;
              this.$emit("colseUserPlaylist");
              this.$emit("userTracksFail");
            }
          );
        } else {
          this.isSelect = true;
        }
      }
    },
    // 获取用户歌单
    getUserPlaylist() {
      this.$store
        .dispatch("user_playlist/getUserPlaylist", {
          uid: this.login_status_data.profile.userId
        })
        .then(data => {
          for (let i = 0; i < data.playlist.length; i++) {
            this.isOption.push(false);
          }
        });
    },
    // 点击遮罩层关闭
    clickColse() {
      this.$emit("colseUserPlaylist");
    }
  }
};
</script>
<style lang="scss" scoped>
.user_playlist {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1001;
  background-color: rgba($color: #000000, $alpha: 0.5);
  .main {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 85%;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    .top {
      overflow: hidden;
      line-height: 1rem;
      .left {
        float: left;
        color: #333;
        font-size: 0.34rem;
        font-weight: 900;
      }
      .right {
        float: right;
        i {
          background: url(../images/cdz.png) no-repeat;
          background-size: 100% 100%;
          width: 0.5rem;
          height: 0.5rem;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          color: #666;
          font-size: 0.3rem;
          display: inline-block;
          vertical-align: middle;
          b {
            font-weight: normal;
          }
        }
        span.red {
          color: #ff2d0f;
        }
      }
    }
    .content {
      ul::-webkit-scrollbar {
        width: 0 !important;
        display: none; /*隐藏滚轮*/
      }
      ul {
        max-height: 6rem;
        overflow-y: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        li.new {
          .img {
            width: 1rem;
            height: 1rem;
            background-color: #eee;
            position: relative;
            float: left;
            img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 0.5rem;
              height: 0.5rem;
            }
          }
          .info {
            p {
              line-height: 1rem;
            }
          }
        }
        li.exist {
          .img {
            width: 1rem;
            height: 1rem;
            position: relative;
            float: left;
            img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 1rem;
              height: 1rem;
            }
            .privacy {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 0rem;
              height: 0rem;
              border: 0.28rem solid;
              border-color: transparent rgba($color: #000000, $alpha: 0.5)
                rgba($color: #000000, $alpha: 0.5) transparent;
              i {
                width: 0.1rem;
                height: 0.1rem;
                display: inline-block;
                background: url(../images/b53.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                bottom: -0.22rem;
                right: -0.28rem;
              }
            }
          }
          .info {
            p {
              margin-top: 0.15rem;
            }
            span {
              color: #999;
              font-size: 0.28rem;
            }
          }
        }
        li {
          text-align: left;
          overflow: hidden;
          padding: 0.2rem 0;
          position: relative;
          .info {
            float: left;
            margin-left: 0.2rem;
            p {
              color: #333;
              font-size: 0.3rem;
            }
          }
          i {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0.1rem;
            margin: auto;
            display: inline-block;
            padding: 0.1rem;
            width: 0.5rem;
            height: 0.5rem;
          }
          i.option {
            background: url(../images/a1i.png) no-repeat;
            background-size: 100% 100%;
            -webkit-filter: contrast(0%) opacity(50%);
            filter: contrast(0%) opacity(50%);
          }
          i.optionTrue {
            background: url(../images/a48.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>